<template>
  <div class="multi-row-layout">
    <!-- 外层容器 -->
    <el-row :gutter="20" class="main-container">
      <el-col :span="24">
        <!-- 第一行内容 -->
        <el-row :gutter="20" class="content-row">
          <el-col :span="12" :xs="24">
            <!-- 外层容器，可设置背景、圆角、内边距等样式模拟框 -->
            <el-card class="water-stats-card" shadow="hover" header="总用量">
                  <!-- 内容区域，用栅格系统布局 -->
                  <el-row :gutter="20">
                    <!-- 日用水量列 -->
                    <el-col :span="8">
                      <div class="stats-item">
                        <div class="text-group">
                          <div class="title">日用水量</div>
                          <div class="value">0.83 <span>万吨</span></div>
                          <div class="trend">
                            <el-row>
                              <span>环比昨日</span>
                              <el-tag type="success" class="trend-tag" :icon="ArrowDown">
                                -13.82%
                              </el-tag>
                            </el-row>
                            <el-row>
                              <span>同比去年</span>
                              <el-tag type="success" class="trend-tag" :icon="ArrowDown">
                                -13.17%
                              </el-tag>
                            </el-row>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <!-- 月用水量列 -->
                    <el-col :span="8">
                      <div class="stats-item">
                        <div class="text-group">
                          <div class="title">月用水量</div>
                          <div class="value">6.9 万吨</div>
                          <div class="trend">
                            <el-row>
                              <span>环比上月</span>
                              <el-tag type="danger" class="trend-tag" :icon="ArrowUp">
                                +5.14%
                              </el-tag>
                            </el-row>
                            <el-row>
                              <span>同比去年</span>
                              <el-tag type="danger" class="trend-tag" :icon="ArrowUp">
                                +5.24%
                              </el-tag>
                            </el-row>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <!-- 年用水量列 -->
                    <el-col :span="8">
                      <div class="stats-item">
                        <div class="text-group">
                          <div class="title">年用水量</div>
                          <div class="value">185.08 万吨</div>
                          <div class="trend">
                            <span>同比去年</span>
                            <el-tag type="success" class="trend-tag" :icon="ArrowDown">
                              -5.1%
                            </el-tag>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
            </el-card>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-card class="ranking-card" shadow="hover" header="用水量排名">
              <el-row>
                <el-col :span="3" :xs="5">
                  <!-- 右侧时间标签 -->
                  <el-menu
                      default-active="month"
                      class="vertical-menu1"
                      mode="vertical"
                      background-color="white"
                      @select="handleMenu1Select"
                  >
                    <el-menu-item index="month">
                      <span>本月</span>
                    </el-menu-item>
                    <el-menu-item index="yesterday">
                      <span>昨日</span>
                    </el-menu-item>
                  </el-menu>
                  <!-- 更多详情按钮 -->
                  <el-button
                      type="text"
                      class="more-btn"
                      @click="handleMore1"
                  >
                    更多详情
                  </el-button>
                </el-col>
                <el-col :span="21" :xs="19">
                  <!-- 卡片内容区 -->
                  <el-row :gutter="20">
                    <div class="content-container">
                      <!-- 左侧排名列表 -->
                      <div class="ranking-list">
                        <div
                            class="ranking-item"
                            v-for="(item, index) in rankingList1"
                            :key="index"
                        >
                          <!-- 排名标签（TOP1/TOP2/TOP3） -->
                          <el-tag
                              class="rank-tag"
                              :class="`rank-tag--${index + 1}`"
                          >
                            TOP{{ index + 1 }}
                          </el-tag>
                          <!-- 单位名称 -->
                          <span class="unit-name">{{ item.name }}</span>
                          <!-- 数值（向右对齐） -->
                          <span class="unit-value">{{ item.value }} 吨/人</span>
                        </div>
                      </div>
                    </div>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <!-- 第二行内容 -->
        <el-row :gutter="20" class="content-row">
          <el-col :span="24">
            <el-card shadow="hover">
              <el-row :gutter="20">
                <!-- 菜单区 -->
                <el-col :span="2" :xs="4">
                  <!-- 时间标签 -->
                  <el-menu
                      default-active="month"
                      class="vertical-menu2"
                      mode="vertical"
                      @select="handleMenu2Select"
                  >
                    <el-menu-item index="year" class="vertical-text">
                      <span>今年</span>
                    </el-menu-item>
                    <el-menu-item index="month" class="vertical-text">
                      <span>本月</span>
                    </el-menu-item>
                  </el-menu>
                  <!-- 更多详情按钮 -->
                  <el-button
                      type="text"
                      class="more-btn"
                      @click="handleMore2"
                  >
                    更多详情
                  </el-button>
                </el-col>
                <!-- 指标区 -->
                <el-col :span="12" :xs="20">
                  <div class="metric-panel">
                    <div
                        class="metric-item"
                        v-for="(item, idx) in metricList"
                        :key="idx"
                    >
                      <!-- 文本区域 -->
                      <div class="metric-text">
                        <span class="metric-title">{{ item.title }}</span>
                        <span class="metric-value">{{ item.value }} 万吨</span>
                      </div>
                      <!-- 进度条 -->
                      <el-progress
                          :percentage="item.progress"
                          :stroke-width="6"
                          :color="item.color"
                          class="metric-progress"
                      />
                    </div>
                  </div>
                </el-col>

                <!-- 中间仪表盘区 -->
                <el-col :span="10" :xs="24">
                  <div class="gauge-panel">
                    <el-row :gutter="20">
                      <el-col :span="12" v-for="(gauge, idx) in gaugeList" :key="idx">
                        <div class="gauge-card">
                          <div class="gauge-title">{{ gauge.title }}</div>
                          <!-- 模拟环形进度（用 el-progress 实现） -->
                          <el-progress
                              type="circle"
                              :percentage="gauge.percent"
                              :stroke-width="8"
                              :color="gauge.color"
                              class="gauge-chart"
                          >
                            <template #indicator>
                              <div class="gauge-label">
                                <span class="gauge-number">{{ gauge.number }}%</span>
                                <span class="gauge-change">环比 {{ gauge.change }}</span>
                              </div>
                            </template>
                          </el-progress>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <!-- 第三行内容 -->
        <el-row :gutter="20" class="content-row">
          <el-col :span="24">
            <el-card shadow="hover" class="ranking-card" header="夜间最小流量排名">
              <el-row :gutter="20">
                <!-- 左侧导航列 -->
                <el-col :span="8" :xs="24">
                  <div class="content-container">
                    <!-- 左侧排名列表 -->
                    <div class="ranking-list">
                      <div
                          class="ranking-item"
                          v-for="(item, index) in rankingList2"
                          :key="index"
                      >
                        <!-- 排名标签 -->
                        <el-tag
                            class="rank-tag"
                            :class="`rank-tag--${index + 1}`"
                        >
                          TOP{{ index + 1 }}
                        </el-tag>
                        <!-- 单位名称 -->
                        <span class="unit-name">{{ item.name }}</span>
                        <!-- 数值（向右对齐） -->
                        <span class="unit-value">{{ item.value }} 吨/人</span>
                      </div>
                    </div>
                  </div>
                  <!-- 更多详情按钮 -->
                  <el-button
                      type="text"
                      class="more-btn"
                      @click="handleMore3"
                  >
                    更多详情
                  </el-button>
                </el-col>

                <!-- 右侧内容列 -->
                <el-col :span="16" :xs="24">
                  <!-- 图表组件 -->
                  <ECharts :options="chartOptions" style="margin: 0 !important;"/>
                  <!-- 时间选择器 -->
                  <el-date-picker
                      v-model="dateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      style="width: 240px;margin: 0 auto;;display: block"
                      @change="handleDateChange"
                  />
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <!-- 第四行内容 -->
        <el-row :gutter="20" class="content-row">
          <el-col :span="24">
            <el-card shadow="hover">
              <!-- 图表容器：年、月、日用水统计 -->
              <div class="chart-container">
                <el-row :gutter="20">
                  <el-col :span="10" :xs="24">
                    <ECharts :options="yearChart" style="margin: 0 !important;"/>
                  </el-col>
                  <el-col :span="14" :xs="24">
                    <ECharts :options="monthChart" style="margin: 0 !important;"/>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <ECharts :options="dayChart" style="margin: 0 !important;"/>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
const version = ref('3.9.0')

function goTarget(url) {
  window.open(url, '__blank')
}

import { ElCard, ElRow, ElCol, ElButton, ElTooltip } from 'element-plus'
import { MoreFilled,Menu } from '@element-plus/icons-vue'
import ECharts from '@/components/ECharts/index.vue';

const chartOptions = ref({
  xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed']},
  yAxis: {type: 'value'},
  series: [{data: [120, 200, 150], type: 'line'}]
});

const yearChart = ref({
  title: { text: '年用水量', left: '10px' },
  grid: {
    top: '100px'  // 增加顶部网格距离，为标题预留空间
  },
  xAxis: {
    type: 'category',
    data: ['2020年', '2021年', '2022年', '2023年', '2024年', '2025年']
  },
  yAxis: { type: 'value', name: '万吨' },
  series: [
    {
      name: '用量',
      type: 'bar',
      data: [300, 320, 320, 340, 340, 200], // 模拟数据，需替换为真实值
      itemStyle: { color: '#489FFE' } // 蓝色柱子
    },
    {
      name: '生活',
      type: 'line',
      data: [247, 300, 320, 200, 200, 100], // 模拟数据
      itemStyle: { color: '#FAB637' } // 橙色折线
    }
  ]
})

const monthChart = ref({
  title: {
    text: '月用水量（2025年）\n\n{b|累计用水量：} {a|185.07万吨}',
    left: '10px' ,
    textStyle: {
      rich: {
        a: {
          fontSize: 20,
          fontWeight: 'bold'
        },
        b: {
          fontSize: 16,
        }
      }
    },
  },
  grid: {
    top: '110px'  // 增加顶部网格距离，为标题预留空间
  },
  xAxis: {
    type: 'category',
    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  },
  yAxis: { type: 'value', name: '万吨' },
  series: [
    {
      name: '用量',
      type: 'bar',
      data: [20, 18, 22, 22, 22, 22, 22, 5, 0, 0, 0, 0], // 模拟数据
      itemStyle: { color: '#489FFE' }
    },
    {
      name: '生活',
      type: 'line',
      data: [22.8, 20, 22.8, 20, 20, 20, 20, 5, 0, 0, 0, 0], // 模拟数据
      itemStyle: { color: '#FAB637' }
    }
  ]
})

const dayChart = ref({
  title: {
    text: '日用水量（2026年0月）\n\n{b|累计用水量：} {a|6.90万吨}',
    left: '50px',
    textStyle: {
      rich: {
        a: {
          fontSize: 20,
          fontWeight: 'bold'
        },
        b: {
          fontSize: 16,
        }
      }
    },
  },
  grid: {top: '110px'},
  xAxis: {
    type: 'category',
    data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日','31日']
  },
  yAxis: { type: 'value', name: '万吨' },
  series: [
    {
      name: '用量',
      type: 'bar',
      data: [1.0, 1.1, 1.1, 1.1, 1.1, 1.0, 0.8, 0.6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 模拟数据
      itemStyle: { color: '#489FFE' }
    },
    {
      name: '生活',
      type: 'line',
      data: [1.1, 1.1, 1.1, 1.1, 1.1, 1.0, 0.9, 0.7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 模拟数据
      itemStyle: { color: '#FAB637' }
    }
  ]
})

// 模拟数据
const metricList = [
  {
    title: '一级表',
    value: 8.53,
    progress: 85,  // 进度条百分比
    color: '#87E8DE',
  },
  {
    title: '二级表+区域表',
    value: 4.92,
    progress: 50,
    color: '#FF6B6B',
  },
  {
    title: '三级表',
    value: 4.7,
    progress: 94,
    color: '#42A5F5',
  }
]

const gaugeList = [
  {
    title: '一级漏耗',
    number: 4.5,
    change: '+44.22%',
    percent: 45,   // 环形进度百分比
    color: '#AED581'
  },
  {
    title: '二级漏耗',
    number: 4.5,
    change: '+44.22%',
    percent: 45,
    color: '#AED581'
  }
]

const timeTabs = [
  { label: '今年', active: true },
  { label: '本月', active: false }
]


// 模拟数据
const rankingList1 = [
  { name: '水产学院', value: 3.56 },
  { name: '园艺林学学院', value: 1.63 },
  { name: '动物科学技术学院、动物医学院', value: 0.71 }
]

const rankingList2 = [
  { name: '水产学院', value: 3.56 },
  { name: '园艺林学学院', value: 1.63 },
  { name: '动物科学技术学院、动物医学院', value: 0.71 },
  { name: '水产学', value: 3.56 },
  { name: '园艺林学', value: 1.63 },
  { name: '动物科学技术学', value: 0.71 }
]

// 交互方法
const handleMore = () => {
  // 可扩展：打开下拉菜单/弹窗
  console.log('点击更多操作')
}

const handleTabChange = (tab) => {
  // 切换激活状态
  timeTabs.forEach(item => item.active = false)
  tab.active = true
  console.log(`切换到：${tab.label}`)
}
</script>

<style scoped lang="scss">

.align-center {
  display: flex;
  text-align: center;
  width: 200px !important;
}

.small-size {
  font-size: 7px;
  margin-left: 7px;
  padding: 0;
}

//排名项
.content-container{
  padding: 0;
  display: flex;
  margin:0 auto;
}

.ranking-item {
  display: flex;
  margin-bottom: 10px;
  margin-top: 10px;
}
/* TOP1 样式 */
.rank-tag--1 {
  background-color: #df6d6d;
  color: white;
  border-color: #df6d6d;
}

/* TOP2 样式 */
.rank-tag--2 {
  background-color: #ff9100;
  color: white;
  border-color: #ff9100;
}

/* TOP3 样式 */
.rank-tag--3 {
  background-color: #12e88f;
  color: white;
  border-color: #12e88f;
}

.unit-name {
  /* 给名称部分留出适当空间，避免挤压数值 */
  margin: 0 10px;
  flex: 1; /* 让名称部分占据剩余空间（除了排名和数值） */
  overflow: hidden; /* 名称过长时隐藏 */
  text-overflow: ellipsis; /* 过长显示省略号 */
}

.unit-value {
  margin-left: auto; /* 关键：Flex布局中自动推到右侧 */
  text-align: right; /* 确保文本本身右对齐（应对长文本） */
}

.value {
  font-size: 20px;
}

/* 整体布局 */
.content-row {
  padding: 20px;
}

.vertical-menu1 {

}

.vertical-menu2 {
  /* 确保菜单容器足够高 */
  height: 200px;
  /* 居中菜单 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-text {
  writing-mode: vertical-rl;
  /* 调整文字方向 */
  text-orientation: upright;
  /* 居中对齐 */
  text-align: center;
  /* 根据需要调整宽度和高度 */
  width: 80px;
  height: 100px;
  padding: 30px 0 !important;
}

/* 左侧指标区 */
.metric-panel {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}
.metric-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.metric-icon {
  margin-bottom: 8px;
  color: #42A5F5;
}
.metric-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.metric-title {
  font-size: 14px;
  color: #666;
}
.metric-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.metric-progress {
  margin-top: 8px;
}

/* 中间仪表盘区 */
.gauge-panel {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}
.gauge-card {
  text-align: center;
}
.gauge-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}
.gauge-chart {
  width: 120px;
  margin: 0 auto;
}
/* 覆盖环形进度的轨道颜色 */
.gauge-chart {
  --el-progress-circle-track-color: #ECEFF1;
}
/* 环形中间的文本 */
.gauge-label {
  position: relative;
  top: -60px; /* 调整位置覆盖环形中心 */
  color: #333;
}
.gauge-number {
  font-size: 20px;
  font-weight: 600;
  display: block;
}
.gauge-change {
  font-size: 12px;
  color: #666;
}

/* 右侧菜单区 */
.side-panel {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.time-menu {
  margin-bottom: 16px;
}
.menu-item {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  text-align: right;
  color: #666;
  transition: background 0.3s;
}
.menu-item.active {
  background: #E3F2FD;
  color: #1976D2;
}
.more-btn {
  text-align: center;
  color: #42A5F5;
  margin-left: 4px;
}

</style>

